<!-- 需求列表 -->
<template>
  <div class="brw">
    <useSort :sortOption="sortOption" v-model="formData" @change="getList" />
    <div class="list" v-loading="loading">
      <ul v-if="dataList.length>0">
        <li v-for="(item, index) in dataList" :key="index" @click="to(item.id)">
          <div class="stateTag">
            <div
              class="state"
              :class="{ finished: item.status === 'FINISHED' }"
            >
              {{ filterEnum(item.status,needStatus ) }}
            </div>
            <div class="des">
              <template v-if="item.status === 'UNDERWAY'"
                ><span>{{ item.expirationDays }}天</span>后 截止 |
              </template>
              <span>{{ item.participantCount }}次</span> 商家参与
            </div>
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="describe">
            {{ item.detailDesc }}
          </div>
          <div class="labels">
            <span>
              <i class="iconfont icon-Publisher"></i>{{ item.userName }}
            </span>
            <span>
              <i class="iconfont icon-label"></i>
              <em v-for="code in item.serviceCategoryCodes.split(',')" class="category">
                {{ filterEnum(code,categoryList,{label:'categoryName',value:'categoryCode'} ) }}
              </em>
            </span>
            <span>
              <i class="iconfont icon-time"></i>{{ item.createTime }}发布
            </span>
          </div>
        </li>
      </ul>
      <el-empty v-else description="暂无数据" />
    </div>

    <div class="pt-24px flex-center" v-if="pagination">
      <el-pagination
        :background="true"
        :current-page="initParam.pageNum"
        :page-size="initParam.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="initParam.total"
        :layout="'total, sizes, prev, pager, next'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup>
import api from "@/utils/api";
import { needStatus } from "@/utils/dict";

// 获取用户信息
import { storeToRefs } from "pinia";
const user = useStore.user();
const global = useStore.global();
const { userInfo } = storeToRefs(user);
const { categoryList } = storeToRefs(global);

const props = defineProps({
  pagination: {
    type: Boolean,
    default: true,
  },
  queryFrom: {
    type: Object,
    default: () => {},
  },
  queryTitle: {
    type: String,
    default: "",
  },
});
const sortOption = ref(["发布时间", "剩余时间", "参与数"]);

const formData = reactive([
  {
    isAsc: false,
    column: "create_time",
  },
  {
    isAsc: false,
    column: "cutoff_date",
  },
  {
    isAsc: false,
    column: "participant_count",
  },
]);
// 表格初始参数
const initParam = reactive({
  pageNum: 1,
  pageSize: 10,
});
const loading = ref(false)
const dataList = ref([]);
const getList = () => {
  loading.value = true
  let queryFrom = {};
  if (props.queryFrom) {
    queryFrom = JSON.parse(JSON.stringify(props.queryFrom));
    Object.keys(queryFrom).forEach((key) => {
      if (Array.isArray(queryFrom[key])) {
        queryFrom[key] = queryFrom[key].filter((it) => it !== "all");
      }
    });
  }

  api
    .post(
      "/demand/front/queryPage",
      {
        ...initParam,
        ...queryFrom,
        title: props.queryTitle,
        sortItemList: formData,
      },
      { loading: true }
    )
    .then((res) => {
      dataList.value = res.list;
      initParam.total = res.total;
      loading.value = false
    });
};

const handleSizeChange = (val) => {
  initParam.pageNum = 1;
  initParam.pageSize = val;
  getList();
};
const handleCurrentChange = (val) => {
  initParam.pageNum = val;
  getList();
};

const to = (id) => {
  navigateTo(`/demand/detail?id=${id}`);
};

watch(
  () => props.queryFrom,
  (newQuery, oldQuery) => {
    getList();
  },
  {
    deep: true,
    immediate: true,
  }
);

defineExpose({ getList });
</script>
<style scoped lang="scss">
.brw {
  padding-bottom: 24px;
}

.list {
  li + li {
    margin-top: 12px;
  }
  li {
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid var(--use-color-line);
    cursor: pointer;

    &:hover {
      border-color: var(--use-color-info);
    }

    .title {
      font-size: 18px;
      font-weight: 500;
      padding: 10px 0;
      line-height: 26px;
    }
    .describe {
      line-height: 22px;
      color: var(--use-color-info-light-2);
    }
    .labels {
      padding-top: 12px;
      color: var(--use-color-info-light-3);
      span {
        margin-right: 20px;
        .iconfont {
          margin-right: 7px;
        }
      }
    }
  }
}

.category{
  font-style: normal;
  &+&{
    margin-left: 10px;
  }
}
</style>
